
import { useEffect, useState } from 'react'
import './index.scss'
import { useLocation } from 'react-router-dom'
import { getgroupDetail } from '../../api/house'
import Nav from "../../component/Nav/index"
export const GroupDetail = () => {
    //路由
    const { state: { id, name } } = useLocation()
    //  const { push } = useHistory()
    const [detail, setDetail] = useState({})
    useEffect(() => {
        const getList = async () => {
            let res = await getgroupDetail({ id })
            setDetail(res.data)
        }
        getList()
    }, [id])
    console.log(detail);
    return (
        <div className='groupDetail'>
            <Nav>{name}</Nav>
            <div className="group-item" >
                <img src={detail.img} alt="" />
                <div className='group-box'>
                    <h3>{detail.name}</h3>
                    <p>{detail.address}</p>
                    <div className='group-time'>
                        <span>活动时间：{detail.Update_time}</span>
                        <span>已报名{detail.num}人</span>
                    </div>
                    <div>
                        <h3>团购介绍</h3>
                        <p>优美的自然环境、典雅别致的人工景观、缓慢的生活节奏、浓厚的人文底蕴融合现代化所带来的时代风尚，优质的适居城市。
                            小区位于宜昌路西康路，紧邻乐购超市――长寿路核心地段，步行至地铁7号线长寿路站仅5分钟，用“入则宁静，出则繁华”来形容此小区一点也不假
                            厅南北通，采光很好，而且看小区花园，景色宜人，本房楼层也很不错，视野开阔，阳光更没有任何遮挡
                            风景秀美的森林公园、不可复制的世界地质公园、古老而神秘的森林公园、烙印着时代变迁的公园等独特资源给广大市民工作之余提供了难得的独享空间。
                            区域功能划分明显，现代城市商业核心，充满着时尚气息</p>
                        <p>优美的自然环境、典雅别致的人工景观、缓慢的生活节奏、浓厚的人文底蕴融合现代化所带来的时代风尚，优质的适居城市。
                            小区位于宜昌路西康路，紧邻乐购超市――长寿路核心地段，步行至地铁7号线长寿路站仅5分钟，用“入则宁静，出则繁华”来形容此小区一点也不假
                            厅南北通，采光很好，而且看小区花园，景色宜人，本房楼层也很不错，视野开阔，阳光更没有任何遮挡
                            风景秀美的森林公园、不可复制的世界地质公园、古老而神秘的森林公园、烙印着时代变迁的公园等独特资源给广大市民工作之余提供了难得的独享空间。
                            区域功能划分明显，现代城市商业核心，充满着时尚气息</p>
                    </div>
                    <div>

                    </div>
                </div>
            </div>
        </div>
    )
}

export default GroupDetail
